<!--
author: 何其沆(pooky)
desc: 漏斗图
date: 2021-11-18
-->
<template>
  <div class="charts-area-item">
    <e-title title="Target Clients Process Data" />
    <div ref="chart" class="chart-instance"></div>
    <div v-if="data[3]" class="phase3">{{ data[3].total }}</div>
    <div v-if="data[4]" class="phase2">{{ data[4].total }}</div>
    <div v-if="data[5]" class="phase1">{{ data[5].total }}</div>
    <div v-if="data[6]" class="close">{{ data[6].total }}</div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
// import * as echarts from 'echarts'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  MarkLineComponent
} from 'echarts/components'
import { FunnelChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import ETitle from '@/components/ETitle.vue'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  MarkLineComponent,
  FunnelChart,
  CanvasRenderer
])

const store = useStore()
const chart = ref(null)
const data = ref([])
let funnelChart = null
/**
 * 获取年数据
 * @type {ComputedRef<[]|*>}
 */
const yearData = ref(
  computed(() => {
    return store.state.pm.adminYearData
  })
)
/**
 * 获取季度数据
 * @type {ComputedRef<[]|*>}
 */
const quarterData = ref(
  computed(() => {
    return store.state.pm.adminQuarterData
  })
)
/**
 * 获取月数据
 * @type {ComputedRef<[]|*>}
 */
const monthData = ref(
  computed(() => {
    return store.state.pm.adminMonthData
  })
)
/**
 * 生成图表
 * @param data
 */
const getChart = data => {
  if (funnelChart !== null && funnelChart !== '' && funnelChart !== undefined) {
    funnelChart.dispose()
  }
  funnelChart = echarts.init(chart.value)
  let total = 0
  if (Math.max(data[3].total, data[4].total, data[5].total, data[6].total) * 2 === 0) {
    total = 1
  } else {
    total = Math.max(data[3].total, data[4].total, data[5].total, data[6].total) * 2
  }
  funnelChart.setOption({
    series: [
      {
        type: 'funnel',
        zlevel: 4,
        width: '80%',
        top: 40,
        bottom: 20,
        left: '10%',
        right: '10%',
        min: 0,
        max: total,
        minSize: '0%',
        maxSize: '100%',
        sort: 'none',
        markLine: {
          symbol: 'none',
          zlevel: 0,
          data: [
            [
              {
                x: '50%',
                y: 40
              },
              {
                x: '75%',
                y: 40,
                value: 'Phase 3',
                lineStyle: {
                  type: 'solid',
                  color: '#91dcc0'
                }
              }
            ],
            [
              {
                x: '50%',
                y: 125
              },
              {
                x: '75%',
                y: 125,
                value: 'Phase 2',
                lineStyle: {
                  type: 'solid',
                  color: '#d1d599'
                }
              }
            ],
            [
              {
                x: '50%',
                y: 210
              },
              {
                x: '75%',
                y: 210,
                value: 'Phase 1',
                lineStyle: {
                  type: 'solid',
                  color: '#ffad64'
                }
              }
            ],
            [
              {
                x: '50%',
                y: 295
              },
              {
                x: '75%',
                y: 295,
                value: 'Close Clients',
                lineStyle: {
                  type: 'solid',
                  color: '#e14d4d'
                }
              }
            ],

            [
              {
                x: '50%',
                y: 100
              },
              {
                x: '25.0%',
                y: 100,
                value: data[3].total !== 0 ? ((data[4].total / data[3].total) * 100).toFixed(2) + '%' : '0%',
                lineStyle: {
                  type: 'solid',
                  color: '#e2e6f0'
                }
              }
            ],
            [
              {
                x: '50%',
                y: 185
              },
              {
                x: '25%',
                y: 185,
                value: data[4].total !== 0 ? ((data[5].total / data[4].total) * 100).toFixed(2) + '%' : '0%',
                lineStyle: {
                  type: 'solid',
                  color: '#e2e6f0'
                }
              }
            ],
            [
              {
                x: '50%',
                y: 270
              },
              {
                x: '25%',
                y: 270,
                value: data[5].total !== 0 ? ((data[6].total / data[5].total) * 100).toFixed(2) + '%' : '0%',
                lineStyle: {
                  type: 'solid',
                  color: '#e2e6f0'
                }
              }
            ]
          ]
        },
        label: {
          show: false,
          position: 'inside',
          formatter: ''
          // fontSize: 14
          // fontWeight: 'bold',
          // color: '#999'
        },
        data: [
          {
            value: data[3].total,
            name: 'Phase 3',
            itemStyle: {
              color: '#f5fffb',
              borderWidth: 1,
              borderColor: '#91dcc0'
            }
          },
          {
            value: data[4].total,
            name: 'phase 2',
            itemStyle: {
              color: '#feffee',
              borderWidth: 1,
              borderColor: '#d1d599'
            }
          },
          {
            value: data[5].total,
            name: 'Phase 1',
            itemStyle: {
              color: '#fff2e9',
              borderWidth: 1,
              borderColor: '#ffad64'
            }
          },
          {
            value: data[6].total,
            name: 'Close',
            itemStyle: {
              color: '#ffcbcb',
              borderWidth: 1,
              borderColor: '#e14d4d'
            }
          }
        ]
      }
    ]
  })
}
/**
 * 监听数据变化
 */
watch(
  () => [yearData, quarterData, monthData],
  ([yVal, qVal, mVal]) => {
    setTimeout(() => {
      if (yVal.value.length !== 0) {
        if (yVal.value.data.phaseData) {
          data.value = yVal.value.data.phaseData
        } else {
          data.value = [
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 }
          ]
        }
      } else if (qVal.value.length !== 0) {
        if (qVal.value.data.phaseData) {
          data.value = qVal.value.data.phaseData
        } else {
          data.value = [
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 }
          ]
        }
      } else if (mVal.value.length !== 0) {
        if (mVal.value.data.phaseData) {
          data.value = mVal.value.data.phaseData
        } else {
          data.value = [
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 },
            { total: 0 }
          ]
        }
      }
      getChart(data.value)
    }, 0)
  },
  {
    deep: true
  }
)
const flag = ref(
  computed(() => {
    return store.state.pm.flag
  })
)
watch(
  () => flag.value,
  () => {
    funnelChart.resize()
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less">
.charts-area-item {
  flex: 1;
  box-shadow: 0 1px 3px @shadow-color;
  background-color: @white;
  padding: 30px;
  box-sizing: border-box;
  margin-right: 24px;
  position: relative;
  .chart-instance {
    height: 400px;
  }
  .phase3,
  .phase2,
  .phase1,
  .close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #999;
    font-weight: bold;
    z-index: 3500;
  }
  .phase3 {
    top: 20%;
  }
  .phase2 {
    top: 38%;
  }
  .phase1 {
    top: 56%;
  }
  .close {
    top: 74%;
  }
}
</style>
